<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor class="myEditor" :defaultConfig="editorConfig" :style="{ 'height': height }" v-model="html"
        @onChange="onChange" @onCreated="onCreated" />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getToken } from "@/utils/auth";
import { Message } from "element-ui";
export default {
  name: "hkEditor",
  components: { Editor, Toolbar },
  props: {
    value: {
      default: "",
    },
    /* 高度 */
    height: {
      type: String,
      default: '500px',
    },
    /* 最小高度 弃用*/
    minHeight: {
      type: String,
      default: 'auto',
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: [String, Number],
      default: '请输入内容...'
    }
  },

  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        excludeKeys: ["fullScreen"],
      },
      editorConfig: {
        scroll: true,
        placeholder: this.placeholder,
        readOnly: this.readOnly,
        pasteFilterStyle:false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            // 配置服务器端地址
            server: process.env.VUE_APP_BASE_API + "/common/upload",
            fieldName: "file",
            headers: {
              Authorization: "Bearer " + getToken()
            },
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 10 * 1000,
            base64LimitSize: 5 * 1024,

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
              this.$message.error("上传失败");
            },

            customInsert(res, insertFn) {
              console.log(res);
              if (res.code == 200) {
                insertFn(res.url);
              }
            },
          },
          uploadVideo: {
            server: process.env.VUE_APP_BASE_API + "/common/upload",
            fieldName: "file",
            headers: {
              Authorization: "Bearer " + getToken()
            },
            withCredentials: true,
            // 超时时间，默认为 10 秒
            timeout: 15 * 1000,
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
              Message.error("上传失败", res);
            },
            customInsert(res, insertFn) {
              if (res.code == 200) {
                insertFn(res.url);
              }
            }
          },
          insertVideo: {
            onInsertedVideo(videoNode) {                    // JS 语法
              if (videoNode == null) return

              const { src } = videoNode
              console.log('inserted video', src)
            },
            checkVideo: this.customCheckVideoFn, // 也支持 async 函数
            parseVideoSrc: this.customParseVideoSrc, // 也支持 async 函数
          }
        },

      },
    };
  },

  watch: {
    value: {
      handler(val, oldVal) {
        this.html = val || "";
      },
      deep:true,
      immediate: true
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },
    onChange(editor) {
      console.log(editor.getHtml());
      this.$emit("input", editor.getHtml());
    },
    customCheckVideoFn(src, poster) {                                             // JS 语法
      if (!src) {
        return
      }
      if (src.indexOf('http') !== 0) {
        return '视频地址必须以 http/https 开头'
      }
      return true

      // 返回值有三种选择：
      // 1. 返回 true ，说明检查通过，编辑器将正常插入视频
      // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
      // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
    },

    // 自定义转换视频
    customParseVideoSrc(src) {               // JS 语法
      if (src.includes('.bilibili.com')) {
        // 转换 bilibili url 为 iframe （仅作为示例，不保证代码正确和完整）
        const arr = location.pathname.split('/')
        const vid = arr[arr.length - 1]
        return `<iframe src="//player.bilibili.com/player.html?bvid=${vid}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>`
      }
      return src
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },



};
</script>


<style lange="scss" scoped>

</style>
